<template>
  <div class="common-layout">
    <!-- <el-container>
      <el-header style="min-height: 6vh; margin-top: 1vh">
        <div class="header-content common-div-card">
          <el-form :model="headerSearchForm" label-width="auto" :inline="true">
            <el-form-item label="时间范围">
              <div class="date-select">
                <el-date-picker v-model="headerSearchForm.start" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                <span>-</span>
                <el-date-picker v-model="headerSearchForm.end" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main> -->
    <div class="table-container common-div-card">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center', border: '1px solid #e1e1f1' }"
        :cell-style="{ textAlign: 'center' }"
        v-loading="loading"
        ref="tableRef"
        :show-overflow-tooltip="true"
        element-loading-text="加载中..."
        show-summary
        border
      >
        <template v-for="(col, index) in columns" :key="index">
          <el-table-column :label="col.label" :prop="col.prop" :fixed="index < 1 ? 'left' : false" :width="index < 1 ? 120 : undefined">
            <template v-if="col.children && col.children.length">
              <el-table-column v-for="(subCol, subIndex) in col.children" :key="subIndex" :label="subCol.label" :prop="subCol.prop" />
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <!-- <div class="pagination common-div-card">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
    <!-- </el-main>
    </el-container> -->
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage, ElMessageBox, ElTable, TabsPaneContext } from 'element-plus';
  import dayjs from 'dayjs';
  import { contractTrackingApi } from '/@/api/report/contractTracking';

  const dateReset = () => {
    headerSearchForm.start = dayjs().format('YYYY-MM-DD 00:00:00');
    headerSearchForm.end = dayjs().format('YYYY-MM-DD 23:59:59');
  };

  interface SearchForm {
    start: string;
    end: string;
  }
  // 表单数据
  const headerSearchForm = reactive<SearchForm>({
    start: '',
    end: '',
  });

  const columns = ref([
    { label: '资源产线', prop: 'lastLine' },
    {
      label: `${Number(dayjs().format('MM')) - 3}月`,
      children: [
        { label: '待过', prop: 'mon00' },
        // { label: '原料库', prop: 'mon01' },
        { label: '轧后', prop: 'mon02' },
        { label: '精整', prop: 'mon03' },
        { label: '欠量', prop: 'mon04' },
      ],
    },
    {
      label: `${Number(dayjs().format('MM')) - 2}月`,
      children: [
        { label: '待过', prop: 'mon10' },
        // { label: '原料库', prop: 'mon11' },
        { label: '轧后', prop: 'mon12' },
        { label: '精整', prop: 'mon13' },
        { label: '欠量', prop: 'mon14' },
      ],
    },
    {
      label: `${Number(dayjs().format('MM')) - 1}月`,
      children: [
        { label: '待过', prop: 'mon20' },
        // { label: '原料库', prop: 'mon21' },
        { label: '轧后', prop: 'mon22' },
        { label: '精整', prop: 'mon23' },
        { label: '欠量', prop: 'mon24' },
      ],
    },
    {
      label: `${dayjs().format('MM')}月`,
      children: [
        { label: '待过', prop: 'mon30' },
        // { label: '原料库', prop: 'mon31' },
        { label: '轧后', prop: 'mon32' },
        { label: '精整', prop: 'mon33' },
        { label: '欠量', prop: 'mon34' },
      ],
    },
  ]);

  // 表格数据
  const tableData = ref<any>([]);
  const tableRef = ref<InstanceType<typeof ElTable>>();
  const loading = ref(false);

  // 分页数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });

  // 获取表格数据
  const fetchTableData = async () => {
    loading.value = true;
    try {
      const res = await contractTrackingApi.overOrderRep();
      tableData.value = res.data.data.map((item: any) => {
        const curItem = { ...item };
        for (const key in curItem) {
          if (key == 'lastLine') continue;
          curItem[key] = curItem[key].toFixed(0);
        }
        return curItem;
      });
      loading.value = false;
    } catch (error) {
      loading.value = false;
      ElMessage.error('获取数据失败');
    }
  };

  // 查询方法
  const handleSearch = () => {
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    // (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
    //   headerSearchForm[key] = '';
    // } );
    dateReset();
    handleSearch();
  };

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  // 生命周期钩子
  onMounted(() => {
    fetchTableData();
  });

  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border: 1px solid #dcdfe6;

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .common-layout {
    width: 99vw;
    min-height: 88vh;
    background-color: #fff;
    padding: 0.5rem;
  }

  .header-content {
    display: flex;
    justify-content: flex-start;
    padding: 1rem 1rem 0 1rem;
    // min-height: 8vh;
    // .el-form {
    //   margin-top: 2vh;
    // }
  }

  .date-select {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }

  .table-container {
    padding: 0.5rem;
    height: 85vh;

    :deep(.el-table) {
      height: 100%;
      max-width: 100%;
    }
  }

  .pagination {
    margin-top: 2vh;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .warning-row {
    background-color: '#ffe6e6';
  }
</style>
